<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body style="background: #FFFFFF;">
		<label>accordion（折叠面板演示）</label>

		<ul class="mui-table-view">
			<!--
            	水果list
            -->
			<li class="mui-table-view-cell mui-collapse mui-active">
				<a class="mui-navigate-right" href="#">水果</a>
				<div class="mui-collapse-content">
					<p>苹果</p>
				</div>
				<div class="mui-collapse-content">
					<p>橘子</p>
				</div>
				<div class="mui-collapse-content">
					<p>西瓜</p>
				</div>
			</li>
			<!--
            	游戏
            -->
			<li class="mui-table-view-cell mui-collapse ">
				<a class="mui-navigate-right" href="#">游戏</a>
				<div class="mui-collapse-content">
					<p>英雄联盟</p>
				</div>
				<div class="mui-collapse-content">
					<p>星际争霸</p>
				</div>
				<div class="mui-collapse-content">
					<p>王者荣耀</p>
				</div>
			</li>
			<!--
            	手机
            -->
			<li class="mui-table-view-cell mui-collapse ">
				<a class="mui-navigate-right" href="#">手机</a>
				<div class="mui-collapse-content">
					<p>华为</p>
				</div>
				<div class="mui-collapse-content">
					<p>小米</p>
				</div>
				<div class="mui-collapse-content">
					<p>魅族</p>
				</div>
			</li>
		</ul>

	</body>

</html>